<html>
<body>
<font style=font-family:verdana;">
<h2>How to use DataPixs</h2>
<p>
Simply create a web page that contains sections between three pluses: +++.
Those sections can say where to get data from, what to do with the data,
how to make the width and height of images depend upon data, and to conditionally
show different things depending upon some data.
<h3>Data sources</h3>
<p>You start by using URLs that provide data in the CSV (comma separated value) format. For example</p>
<a href="http://time-series.data.ox.ac.uk/?action=fetch&type=average&series=mpan:2000027360200,mpan:2000027360868,virtual:computing-services&startTime=1320105600&endTime=1321315200&format=csv">http://time-series.data.ox.ac.uk/?action=fetch&type=average&series=mpan:2000027360200,mpan:2000027360868,virtual:computing-services&startTime=1320105600&endTime=1321315200&format=csv</a>
<p>fetches electric metre readings from some buildings in Oxford University.</p>
<p>You use these URLs by giving names to the values of the data. For example</p>
<p>
+++ oxford1, oxford2, oxford3 = 
    http://time-series.data.ox.ac.uk/?action=fetch&type=average&series=mpan:2000027360200,mpan:2000027360868,virtual:computing-services&startTime=1320105600&endTime=1321315200&format=csv 
+++
</p>
The '+++' indicates the beginning and ends of <i>holes</i> where instructions to DataPixs is given.
Names the first data from that URL <i>oxford1</i>, the second one <i>oxford2</i>, and so on. 
The system automatically generates names for each data item. 
For example, <i>oxford616</i> is the 616<super>th</super> number from the data source (if there are that many).</p>
You can use multiple URL data sources using different names for the values.
<h3>Using data</h3>
<p>You can put data into your page by using the data names as follows:</p>
<p>
The first metre reading is +++ oxford1 +++. 
The average of the next three readings is +++ (oxford2+oxford3+oxford4)/3 +++. 
The amount of electricity used in the first hour is enough to make +++ (oxford1+oxford2)*50 +++ <a href="http://www.carbontrust.co.uk/cut-carbon-reduce-costs/products-services/technology-advice/employee-awareness/pages/poster-fact-calculations.aspx" target="_blank">cups of tea</a>.
</p><br>
<p>You can use '+', '-', '*' (multiplication), and '/' (division) to compute things. 
You can use brackets to group things together. 
(Without the parentheses oxford2+oxford3+oxford4/3 will add together <i>oxford2</i>, <i>oxford3</i>, and <i>oxford4</i>/3.)</p>

<p>Try copying and pasting the data source and the example above into DataPixs and click on <b>Save and create a live web page</b> to see what it does.</p>

<h3>Stretching and shrinking images</h3>
<p>You can include images in the instructions to DataPixs and then compute the <i>width</i> and <i>height</i> of the image. 
For example</p>
<p>
The height of this +++ <img src="http://upload.wikimedia.org/wikipedia/commons/3/3e/Tree-256x256.png"> height = oxford9/2 width = 20 +++
is proportional to the value of the <i>oxford9</i> data element.</p>
<h3>Conditional content</h3>
<p>You can have text and images depend upon the value of data elements. 
To do this use <i>if</i> and <i>then</i> in the instruction. In between <i>if</i> and <i>then</i> you can use 
&lt; (less than), &gt; (greater than), &lt;= (less than or equal), &gt;= (greater than or equal), = (equal), or != (not equal)
to compare two values. If the expression is true then everything after the <i>then</i> will be included on your live page.
You can also add <i>else</i> to your instruction and then if the expression is false everything after the <i>else</i> will be included.
For example,</p>
<p>
It is +++ if oxford1&lt;oxford2 then bad that energy consumption is increasing else good that energy consumption is decreasing +++.
</p>
<h3>Continuing to improve your visualisation</h3>
<p>You can share the visualisation URL with everyone. 
When the page is loaded it will show the latest value of the data. 
To improve your visualisation on another day you need to save the URL in the DataPixs authoring tab.
</p>
<h3>Using your own web pages as DataPixs visualisations</h3>
<p>If you have created a web page with DataPixs instructions elsewhere you can turn it into a live visualisation by entering http::/datapixs.appspot.com/#" followed by your URL.
For example 
<a href="http://datapixs.appspot.com/#https://sites.google.com/site/datapixsproject/examples/testing-all-features" target="_blank">http://datapixs.appspot.com/#https://sites.google.com/site/datapixsproject/examples/testing-all-features</a>
is a live version of this help page.
</p>
</font>
</body>
</html>